import { SendCodeComponent } from './../../../../common/components/send-code/send-code.component'
import { CoolLocalStorage } from 'src/app/common/coolStorage/cool-local-storage'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { AcivityService } from './service/activity.serveic'
import { ActivatedRoute } from '@angular/router'
import { Component, OnInit, ViewChild } from '@angular/core'
import { Location } from '@angular/common'
import { phoneValidator } from './service/phone.validator'
import { CommonUtil } from 'src/app/common/utils/common.util'

@Component({
  selector: 'app-activity-signup',
  templateUrl: './activity-signup.component.html',
  styleUrls: ['./activity-signup.component.scss']
})
export class ActivitySignupComponent implements OnInit {
  public ActivityID: any
  public applyForm: FormGroup
  public codeIsShow: boolean = false
  public nick: any
  public detail: any
  public loading: boolean = true

  activeSex: any = 1

  constructor(
    private location: Location,
    private routeInfo: ActivatedRoute,
    private service: AcivityService,
    private cool: CoolLocalStorage,
    private fb: FormBuilder,
    private utils: CommonUtil
  ) {}

  ngOnInit() {
    this.ActivityID = this.routeInfo.snapshot.queryParams['ActivityID']
    this.applyForm = this.fb.group({
      name: ['', [Validators.required]],
      tel: ['', [Validators.required, phoneValidator()]]
    })

    this.getActivityDetail({
      promotion: this.ActivityID,
      zone: this.cool.getItem('zone')
    })
  }

  getPhoneCode(code) {
    this.codeIsShow = false

    this.applySubmit({
      promotion: this.ActivityID,
      linkman: this.applyForm.value['name'] + ' ' + this.nick,
      phone: this.applyForm.value['tel'],
      captcha: code
    })
  }

  @ViewChild(SendCodeComponent)
  private SendCodeComponent: SendCodeComponent

  showPhoneCodeModal() {
    this.SendCodeComponent.sendPhoneCode()
    this.codeIsShow = true
  }

  closeCodeModal() {
    this.codeIsShow = false
  }

  onClickLeft() {
    this.location.back()
  }
  selectSex(index) {
    this.activeSex = index
  }

  onSubmit() {
    this.nick = this.activeSex === 1 ? '先生' : '女士'

    for (const i in this.applyForm.controls) {
      this.applyForm.controls[i].markAsDirty()
      this.applyForm.controls[i].updateValueAndValidity()
    }

    if (this.applyForm.status === 'VALID') {
      if (this.cool.getObject('userinfo')['Mobile'] === this.applyForm.value['tel']) {
        this.applySubmit({
          promotion: this.ActivityID,
          linkman: this.applyForm.value['name'] + ' ' + this.nick,
          phone: this.applyForm.value['tel']
        })
      } else {
        this.showPhoneCodeModal()
      }
    } else if (this.applyForm.get('tel').hasError('phone')) {
      this.utils.info('请输入正确的手机号码')
    } else {
      this.utils.info('称呼和手机号码不能为空')
    }
  }
  //api
  applySubmit(req) {
    this.service.apply(req, res => {
      if (res.Success && res.Result) {
        this.utils.success('报名成功')
        this.location.back()
      } else if (res.Message.indexOf('|') > -1) {
        let msg = res.Message.split('|')[0]
        this.utils.info(msg)
      }
    })
  }

  getActivityDetail(req) {
    this.service.getActivityDetail(req, res => {
      this.detail = res.Result
      this.detail['Description'] = JSON.parse(res.Result.Description)
      this.loading = false
    })
  }
}
